<template>
  <div v-show="activeName === 'modelSettings'" class="model-set">
    <!-- <el-form
      ref="formRef"
      style="max-width: 600px"
      :model="form"
      :rules="rules"
      label-width="200px"
      class="form-box"
    >
      <el-form-item prop="model_name">
        <template #label>
          <div class="label-box">
            <div class="label">模型</div>
            <el-tooltip effect="dark" placement="top">
              <template #content>
                <div class="tip-item">大语言聊天模型</div>
              </template>
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
        </template>
        <el-select v-model="form.model_name" placeholder="请选择">
          <el-option label="模型1" value="1" />
          <el-option label="模型2" value="2" />
        </el-select>
      </el-form-item>
    </el-form> -->
    <div class="table-box">
      <div class="table-top">
        <div class="label-box">
          <div class="label free">自由度</div>
          <el-tooltip effect="dark" placement="top">
            <template #content>
              <div class="tip-item">
                “精确”意味着大语言模型会保守并谨慎地回答你的问题。
                “即兴发挥”意味着你希望大语言模型能够自由地畅所欲言。
                “平衡”是谨慎与自由之间的平衡。
              </div>
            </template>
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
        <el-select
          v-model="form.freedom"
          placeholder="请选择"
          style="width: 200px"
          @change="selectChange"
        >
          <el-option
            v-for="item in freeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="table-main">
        <el-form
          style="max-width: 800px"
          :model="form"
          label-width="200px"
          class="form-box"
        >
          <el-form-item>
            <template #label>
              <div class="label-box">
                <div class="label">温度</div>
                <el-tooltip effect="dark" placement="top">
                  <template #content>
                    <div class="tip-item">
                      该参数控制模型预测的随机性。
                      较低的温度使模型对其响应更有信心，而较高的温度则使其更具创造性和多样性。
                    </div>
                  </template>
                  <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            <div class="content">
              <el-switch v-model="form.temperature_enabled" />
              <el-slider
                v-model="form.temperature"
                show-input
                :step="0.01"
                :min="0.0"
                :max="1.0"
              />
            </div>
          </el-form-item>
          <el-form-item>
            <template #label>
              <div class="label-box">
                <div class="label">topP</div>
                <el-tooltip effect="dark" placement="top">
                  <template #content>
                    <div class="tip-item">
                      该参数也称为“核心采样”，它设置一个阈值来选择较小的单词集进行采样。
                      它专注于最可能的单词，剔除不太可能的单词。
                    </div>
                  </template>
                  <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            <div class="content">
              <el-switch v-model="form.top_p_enabled" />
              <el-slider
                v-model="form.top_p"
                show-input
                :step="0.01"
                :min="0.0"
                :max="1.0"
              />
            </div>
          </el-form-item>
          <el-form-item>
            <template #label>
              <div class="label-box">
                <div class="label">存在处罚</div>
                <el-tooltip effect="dark" placement="top">
                  <template #content>
                    <div class="tip-item">
                      这会通过惩罚对话中已经出现的单词来阻止模型重复相同的信息。
                    </div>
                  </template>
                  <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            <div class="content">
              <el-switch v-model="form.presence_penalty_enabled" />
              <el-slider
                v-model="form.presence_penalty"
                show-input
                :step="0.01"
                :min="0.0"
                :max="1.0"
              />
            </div>
          </el-form-item>
          <el-form-item>
            <template #label>
              <div class="label-box">
                <div class="label">频率惩罚</div>
                <el-tooltip effect="dark" placement="top">
                  <template #content>
                    <div class="tip-item">
                      与存在惩罚类似，这减少了模型频繁重复相同单词的倾向。
                    </div>
                  </template>
                  <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
              </div>
            </template>
            <div class="content">
              <el-switch v-model="form.frequency_penalty_enabled" />
              <el-slider
                v-model="form.frequency_penalty"
                show-input
                :step="0.01"
                :min="0.0"
                :max="1.0"
              />
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";

const props = defineProps(["modelValue", "activeName", "addEdit"]);
const emits = defineEmits(["update:modelValue"]);

const formRef = ref();
const freeOptions = [
  {
    label: "即兴创作",
    value: "Improvise",
  },
  {
    label: "精确",
    value: "Precise",
  },
  {
    label: "平衡",
    value: "Balance",
  },
];
const settledModelVariableMap = {
  Improvise: {
    temperature: 0.9,
    top_p: 0.9,
    frequency_penalty: 0.2,
    presence_penalty: 0.4,
    max_tokens: 512,
  },
  Precise: {
    temperature: 0.1,
    top_p: 0.3,
    frequency_penalty: 0.7,
    presence_penalty: 0.4,
    max_tokens: 512,
  },
  Balance: {
    temperature: 0.5,
    top_p: 0.5,
    frequency_penalty: 0.7,
    presence_penalty: 0.4,
    max_tokens: 512,
  },
};

const rules = reactive({
  // model_name: [{ required: true, message: "请选择模型", trigger: "change" }],
});

const form = computed({
  get: () => props.modelValue,
  set: (val) => {
    emits("update:modelValue", val);
  },
});

onMounted(() => {
  selectChange(form.value.freedom);
});

const selectChange = (val) => {
  const item = settledModelVariableMap[val];
  Object.assign(form.value, { ...form.value, ...item });
};

defineExpose({
  formRef,
  form,
});
</script>

<style lang='scss' scoped>
.form-box {
  :deep(.el-form-item__label) {
    font-weight: 400;
  }
}
.label-box {
  display: flex;
  align-items: center;

  .label {
    margin-right: 4px;
    &.free {
      font-size: 18px;
      font-weight: 700;
      color: #333;
    }
  }
}
.tip-item {
  max-width: 200px;
}
.el-slider {
  padding-left: 8px;
}
.table-box {
  margin: 20px 0;
  border: 1px solid rgba(112, 107, 107, 0.15);
  border-radius: 4px;
  .table-top {
    height: 48px;
    background: rgb(241 245 249);
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .table-main {
    padding: 20px;
  }
  .content {
    width: 100%;
    display: flex;
    align-items: center;
    .el-slider {
      margin: 0 20px;
    }
  }
}
</style>